import {useEffect, useRef} from 'react'

import * as echarts from 'echarts'
import Chart from '../Chart'
const EchartsWrapper: React.FC = () => {
  const chartRef = useRef(null)
  const option: echarts.EChartsOption = {
    title: {text: 'Stacked Area Chart'},
    tooltip: {
      trigger: 'axis',

      formatter: (params: any, ticket: string) => {
        console.log(params, 'params')

        return `<div style="background-color:rgba(0,0,0,0); padding: 10px"> 
        <div style="
        padding:2.6px 10.4px;
        border-radius: 16px;
        font-family:'Public Sans';
        font-size:16px;
        font-weight: 500;
        line-height: 24px;
        letter-spacing: -0.02em;
        background-color:#FFFF;
        color: #000000 "> ${params[0].seriesName} :${params[0].value}   </div>
        <div style="  
        padding:0px 10.4px;
        font-family:'Public Sans';
        font-weight: 500;
        color: #FFFFFF; 
         line-height: 24px;
        letter-spacing: -0.02em;">   ${params[0].axisValue} </div>
        </div>`
      },
      borderColor: 'rgba(0,0,0,0)',
      backgroundColor: 'rgba(0,0,0,0)',
      confine: true,
    },
    backgroundColor: '#000000',
    legend: {
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
    },
    toolbox: {feature: {saveAsImage: {}}},
    grid: {left: '3%', right: '4%', bottom: '3%', containLabel: true},
    xAxis: [
      {
        type: 'category',
        data: ['12-26', '12-27', '12-28', '12-29', '12-30', '12-31'],
        boundaryGap: false,
      },
    ],
    yAxis: {
      type: 'value',
      axisLine: {show: true, lineStyle: {color: '#ccc'}},
      axisLabel: {color: '#999'},
      splitLine: {show: false},
    },
    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        emphasis: {focus: 'series'},
        itemStyle: {color: '#FFFFFF'},
        color: '#0a0a0a',
        lineStyle: {
          color: '#FFFFFF',
        },
        data: [120, 132, 101, 134, 90, 230, 210],
      },
    ],
  }
  const option2 = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1.3k', '1.48k', '1.69k', '1.93k', '2.2k', '2.52k', '2.87k'],
    },
    yAxis: {
      type: 'value',
      show: false,
      max: 100,
    },
    grid: {left: '1%', right: '4%', bottom: '3%', containLabel: true},
    series: [
      {
        data: [38, 35, 26, 0, null, null, null],
        type: 'line',
        smooth: true,
        color: 'green',
        symbol: 'none',
        areaStyle: {
          opacity: 0.4,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#00CC00',
            },
            {
              offset: 1,
              color: 'rgb(0,222,222,0.5)',
            },
          ]),
        },
      },
      {
        data: [null, null, null, 0, 26, 35, 38],
        type: 'line',
        smooth: true,
        color: 'red',
        symbol: 'none',
        areaStyle: {
          opacity: 0.4,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 0, 135)',
            },
            {
              offset: 1,
              color: 'rgb(135, 0, 157,0.5)',
            },
          ]),
        },
      },
    ],
  }
  // <div ref={chartRef} style={{ width: '100%', height: '300px' }}></div>;
  return <Chart options={option2} style={{width: '100%', height: '300px'}} />
}

export default EchartsWrapper
